<template>
  <div class="home">
    <h1>{{ this.$store.state.msg }}</h1>
    <button @click="add">num++</button>
    <h3>{{ $store.state.num }}</h3>

    名字：<input type="text" v-model="name" /> 技能：
    <input type="text" v-model="skill" />
    <button @click="adds">添加</button>

    <h3>总共有{{ sum }}个英雄</h3>
    <h3>总共有{{ $store.getters.all }}个英雄</h3>

    <ul>
      <li v-for="(item, index) in $store.state.list" :key="index">
        {{ item.name }}==={{ item.r }}
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      skill: "",
    };
  },
  methods: {
    add() {
      //因为只有mutation有权利操作state，所以在这里我们要调用一个mutation来操作state
      this.$store.commit("aa");
    },
    adds() {
      this.$store.commit("adds", { name: this.name, r: this.skill });
      // commit只能接受两个值作为参数
    },
    remove(i) {
      this.$store.commit("remove", i);
    },
  },
  computed: {
    sum() {
      let num = 0;
      this.$store.state.list.forEach((item) => {
        num += item.num;
      });
      return num;
    },
  },
};
</script>
